<template>
  <section id="main-container" @mousewheel.passive="mouseWheel($event)">
    <div class="headertop filter-dot">
      <!-- 波浪条-->
      <banner-wave />
      <!-- 大视图-->
      <main-figure />
    </div>
    <div id="page" class="site wrapper">
      <!--分栏格   -->
      <div class="blank"></div>
      <!-- 内容展示区-->
      <div id="content" class="site-content">
        <div class="top-feature-row"
          ><h1 class="fes-title"
            ><i
              class="fa fa-anchor faa-flash animated faa-slow"
              aria-hidden="true"
            ></i>
            START:DASH!!</h1
          >
          <!-- 看点新闻 -->
          <div class="top-feature-item">
            <div
              class="top-feature-v2"
              v-for="(item, index) in start"
              :key="index"
            >
              <div class="the-feature from_left_and_right">
                <router-link :to="{ path: item.path }">
                  <div class="img">
                    <el-image :src="item.src">
                      <template #error>
                        <div class="image-slot">
                          <el-image
                            :src="
                              randomArrayIndex(store.state.defaultErrorImageUrl)
                            "
                            fit="cover"
                          ></el-image>
                        </div>
                      </template>
                    </el-image>
                  </div>
                  <div class="info"
                    ><h3>{{ item.title }}</h3> <p>{{ item.desc }}</p></div
                  >
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <!--博客列表区-->
        <article-list />
      </div>
    </div>
  </section>
</template>

<script setup>
  import BannerWave from './component/BannerWave'
  import MainFigure from './component/MainFigure'

  import ArticleList from '../blog/ArticleList'

  import { randomArrayIndex } from '../../utils/randomArrayElemt.js'

  import { reactive } from 'vue'

  import { useStore } from 'vuex'

  const store = new useStore()

  //看点 STATR
  const start = reactive([
    {
      title: 'Sakura',
      desc: '本站 WordPress 主题',
      path: '/',
      src: 'https://cdn.jsdelivr.net/gh/moezx/cdn@3.3.2/img/other/sakura.md.png'
    },
    {
      title: 'Pixiv',
      desc: 'P 站的正确打开方式',
      path: '/About',
      src: 'https://tva4.sinaimg.cn/large/0072Vf1pgy1foxkittkoij31kw0w0nlj.jpg'
    },
    {
      title: '明日方舟',
      desc: '游戏主界面 H5 复刻',
      path: '/',
      src: 'https://view.moezx.cc/images/2019/06/11/74751807_angel.jpg'
    }
  ])

  /**
   * 判断鼠标滚轮方向
   * @param e
   */
  const mouseWheel = (e) => {
    if (e.wheelDelta || e.detail) {
      let headNav = document.getElementById('site-header')
      if (e.wheelDelta > 0 || e.detail < 0) {
        //当鼠标滚轮向上滚动时
        headNav.style.display = ''
      }
      if (e.wheelDelta < 0 || e.detail > 0) {
        //当鼠标滚轮向下滚动时
        headNav.style.display = 'none'
      }
    }
  }
</script>

<style lang="less" scoped>
  #content {
    .top-feature-row {
      .top-feature-item {
        display: flex;
        justify-content: space-around;
        .top-feature-v2 {
          border-radius: 10px;
          background-color: var(--global-bg);
          box-shadow: var(--soft-shadow) var(--soft-shadow)
              calc(var(--soft-shadow) * 2) var(--theme-bg-shadow),
            calc(-1 * var(--soft-shadow)) calc(-1 * var(--soft-shadow))
              calc(var(--soft-shadow) * 2) var(--theme-bg-high) !important;
        }
      }
    }
  }

  .headertop {
    height: auto;
  }

  .scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }

  .el-slider {
    margin-top: 20px;
  }

  .post-content {
    a:hover {
      color: #fe9600;
      text-decoration: none;
    }
  }

  .post-bottom {
    padding-top: 20px;

    i {
      font-size: 25px;
      color: #666;
    }

    i:hover {
      color: orange;
    }

    .button-normal:hover {
      color: orange;
    }
  }
</style>
